import React from 'react'
// 导入UI组件
import { Spin, Alert, Pagination } from 'antd';

//导入fetch-jsonp
import fetchJSONP from 'fetch-jsonp'
import MovieItem from './MovieItem.jsx'

export default class ComponentName extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      movies: [],
      nowPage: parseInt(props.match.params.page) || 1,
      pageSize: 12,
      total: 0,
      isloading: true,
      movieType: props.match.params.type
    }
  }

  componentWillMount() {
    // fetch('http://vue.studyit.io/api/getlunbo')
    // .then(respnse => {
    //   //console.log(response)
    //   return response.json()
    // })
    // .then(data => {
    //   console.log(data)
    // })
   
    this.loadMovieListByTypeAndPage()
  }

  componentWillReceiveProps(nextProps){
    this.setState({
      isloading: true,
      nowPage: parseInt(nextProps.match.params.page) || 1,
      movieType: nextProps.match.params.type
    },function () {
      this.loadMovieListByTypeAndPage()
    })
  }
  render() {
    return <div>
      {this.renderList()}
    </div>

  }

  // 根据电影类型和页码，获取电影数据
  loadMovieListByTypeAndPage = () => {
    // 注意： 默认的 window.fetch 收到跨域限制，无法直接是使用，这时候，我们使用 第三方包 fetch-jsonp 来发送 JSONP 请求，它的用法，和 浏览器内置的 fetch 完全兼容
    // fetch('https://api.douban.com/v2/movie/in_theaters')
    //   .then(response => response.json())
    //   .then(data => {
    //     console.log(data);
    //   })

    // 开始获取数据的索引
    // const start = this.state.pageSize * (this.state.nowPage - 1)

    // const url = `https://api.douban.com/v2/movie/${this.state.movieType}?start=${start}&count=${this.state.pageSize}`

    // fetchJSONP(url)
    //   .then(response => response.json())
    //   .then(data => {
    //     console.log(data);
    //     this.setState({
    //       isloading: false, // 将 loading 效果隐藏
    //       movies: data.subjects, // 为电影列表重新赋值
    //       total: data.total // 把总条数，保存到 state 上
    //     })
    //   })

    const data = require('../test_data/' + this.state.movieType + '.json')
    setTimeout(() => {
      this.setState({
        isloading: false, // 将 loading 效果隐藏
        movies: data.subjects, // 为电影列表重新赋值
        total: data.total // 把总条数，保存到 state 上
      })
    }, 1000)
  }
   // 渲染电影列表的方法
  renderList = () => {
    if (this.state.isloading) { // 正在加载中
      return <Spin tip="Loading...">
        <Alert
          message="正在请求电影列表"
          description="精彩内容，马上呈现....."
          type="info"
        />
      </Spin>
    } else { // 加载完成
      return <div>
       <div style={{display:'flex', flexWrap:'wrap'}}>
        {this.state.movies.map(item => {
            return <MovieItem {...item} key={item.id} history={this.props.history}></MovieItem>
          })}
      </div>
      <Pagination defaultCurrent={this.state.nowPage} pageSize={this.state.pageSize} total={this.state.total}  onChange={this.pageChanged}/>
      </div>
    }
  }

  pageChanged=(page)=>{
   // 由于我们手动使用 BOM 对象，实现了跳转，这样不好，最好使用 路由的方法，进行编程式导航
   console.log(this.props);
   // window.location.href = '/#/movie/' + this.state.movieType + '/' + page
   // 使用 react-router-dom 实现编程式导航
   this.props.history.push('/movie/' + this.state.movieType + '/' + page)
  }
}


// 在 React 中，我们可以使用 fetch API 来获取数据，fetch API 是基于 Promise 封装的